<template>
    <div class="chat">
        <van-nav-bar fixed left-arrow @click-left='fh' />
        <div id="content" ref="rightBody">
            <div style="text-align: center ; color: #787878;font-size: 13px; margin-top: 10px;">
                <span v-show="show" @click="fy" class="check">点击查看更多</span>
            </div>
            <div v-for="item in list" :key="item.id">
                <div class="chat-model" v-if="!item.isself" style="position: relative">
                    <div>
                        <van-image width="45px" height="45px" fit="fill" round
                            src="https://img01.yzcdn.cn/vant/cat.jpeg" />
                    </div>
                    <div style="position: absolute; left: 50px; top: -3px;">
                        <span style="font-size: 10px;">小明</span>
                        <span style="font-size:10px; color: #a9a9a9;margin-left: 5px;">{{ item.send_time }}</span>
                    </div>
                    <div class="chat-content chat-content-l">
                        {{ item.content }}
                    </div>
                </div>
                <div class="chat-model" style="justify-content: flex-end;position: relative;" v-else>
                    <div class="chat-content chat-content-r">
                        {{ item.content }}
                    </div>
                    <div style="position: absolute; right: 50px; top: -3px;"><span
                            style="font-size:10px; color: #a9a9a9;">{{ item.send_time }}</span></div>
                    <div>
                        <van-image width="45px" height="45px" fit="fill" round
                            src="https://img01.yzcdn.cn/vant/cat.jpeg" />
                    </div>
                </div>
            </div>
        </div>
        <div style="text-align: center ; color: #787878;font-size: 13px;">
            <span v-show="latelyshow" @click="lately" class="btn">点击查看最近消息</span>
        </div>
        <!-- 试试 -->
        <div id="bottom">
            <div id="left"> <input type="text" v-model="text" />
                <van-button @click="onSend">发送</van-button>
                <div id="icon" @click="sonhua">
                    <van-icon name="good-job-o" />
                </div>
            </div>
        </div>

    </div>
</template>
  
<script>
export default {
    name: 'HelloWorld',
    data() {
        return {
            latelyshow: false,
            show: false,
            activeNames: ['0'],
            socket: "",
            text: '',
            data: {
                code: 9002,
                msg: '',
                recId: '',
            },
            list: [],
            time: '', // 定时器
            isActive: false,
            limit: 10,
            page: 1,
            total: 0,
            messagenumber: 10,
            productid: 0
        }
    },
    methods: {
        //发送消息
        async onSend() {
            if (!this.text) {
                this.$toast('请输入内容')
                return;
            }
            var data = {
                avator: 'https://img01.yzcdn.cn/vant/cat.jpeg',
                content: this.text,
                isSelf: false,
                productid:this.productid
            }
            // this.list.push(data);
            let rst = await this.$frontaxios.post(this.$front.sendlivemsg, data)
            this.send()
            this.text = '';
            this.$refs.rightBody.scrollTop = this.$refs.rightBody.scrollHeight;
        },
        //获取数据库的信息
        async send() {
            this.productid = this.$route.query.id
            let rst = await this.$frontaxios.post(this.$front.getlivechatcontent, { productid: this.productid, limit: this.limit, page: this.page })
           if(rst.code==1){
            this.list = rst.data.chatdata
            console.log(rst);
            // .reverse()
            this.total=rst.data.total
           }
        },
        //每过五秒获取一次数据库的信息
        onHeartbeat() {
            this.time = setInterval(() => {
                this.send()
            }, 5000);
        },
        //返回上一页
        fh() {
            this.$router.back()
        },
        //点赞发送的信息
        sonhua() {
            var data = {
                avator: 'https://img01.yzcdn.cn/vant/cat.jpeg',
                content: '点了个赞',
                isSelf: false
            }
            this.list.push(data);
        },
        async fy() {
            this.page++;
            this.latelyshow = true;
            let res = await this.$frontaxios.post(this.$front.getlivechatcontent, { productid: this.productid, limit: this.limit, page: this.page });
            if (res.code == 1) {
                this.list = res.data.chatdata.reverse();
                this.total = res.data.total;
            }
            if (this.list.length < this.messagenumber) {
                this.show = false
            }
        },
        async lately() {
            this.page = 1;
            this.latelyshow = false;
            this.show = true
            let rst = await this.$frontaxios.post(this.$front.getlivechatcontent, { productid: this.productid, limit: this.limit, page: this.page });
            if (rst.code == 1) {
                this.list = rst.data.chatdata.reverse();
                this.total = rst.data.total
            }
      
        },
    },
    async created() {
       await this.send()
        this.onHeartbeat()
        if(this.total>this.messagenumber){
            this.show=true
        }
    },
    destroyed() {
        // 销毁监听
        clearInterval(this.time);
    }
}
</script>
  
<style>
.chat {
    height: 100%;
    background-color: #f1f1f3;
}

#content {
    overflow: auto;
    height: 380px;
    padding-bottom: 100px;
    background-color: #f1f1f3;
}

#bottom {
    position: fixed;
    width: 100%;
    bottom: 0px;
    /* display: flex;
    justify-content: space-evenly;
    padding: 10px 0px; */
    background-color: #F1F1F3;
}

#left {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    padding: 10px 0px;
    background-color: #F1F1F3;
}

#bottom input {
    background-color: white;
    width: 72%;
    height: 30px;
    padding: 3px 5px;
    vertical-align: sub;
    border-style: none;
    border-radius: 5px;
}

#bottom button {
    height: 32px;
    background-color: rgb(245, 158, 1);
    border-radius: 5px;
    color: #fff;
}

.chat-model {
    display: flex;
    flex-direction: row;
    margin: 10px 10px;
    margin-top: 30px;
    align-items: center;
}

.chat-content {
    position: relative;
    max-width: 67%;
    word-break: break-all;
    word-wrap: break-word;
    top: 18px;
    padding: 10px;
    border-radius: 5px;
    background-color: white;
}

.chat-content-r {
    right: 10px;
}

.chat-content-l {
    left: 10px;
}

#icon {
    font-size: 25px;
    margin-top: 2px;
}

.box {
    width: 100%;
    height: 100px;
}

.box .van-icon {
    font-size: 40px;
    color: dimgray;
}
.check {
    margin: 0 auto;
    margin-top: 10px;
}

.btn {
    left: 40%;
    position: fixed;
    bottom: 60px;
}
</style>